<!-- 护理项目列表页 -->

<template>
  <div class="min-h serveProject bg-wt">
      <div class="baseList">
        <div class="tableBoxs">
          <t-table
      row-key="index"
      :data="data"
      :columns="COLUMNS"
      
      cell-empty-content="-"
      resizable
      lazy-load
      
    >
    <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
    // 价格小数点后两位处理
    <template #price="{ row }">{{ row.price.toFixed(2) }}</template>
    <template #image="{row}">
  <div>
    <div class="tdesign-demo-image-viewer__base">
      <t-image-viewer :images="[row.image]">
        <template #trigger="{ open }">
          <div class="tdesign-demo-image-viewer__ui-image">
            <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
              <span><BrowseIcon size="1.4em" /> 预览</span>
            </div>
          </div>
        </template>
      </t-image-viewer>
    </div>
  </div>
</template>
<!-- 操作栏 -->
<template #op="{ row }">
      <div class="operateCon">
        <a 
        class="btn-dl"
        >删除</a>
        <a 
        class="font-bt"
        >编辑</a>
        <a 
        class="delete"
        >禁用</a>
      </div>
    </template>
    </t-table>
    <!-- 分页 -->
  <t-pagination
          v-if="total > 10"
          v-model="pagination.pageNum"
          v-model:pageSize="pagination.pageSize"
          :total="total"
          @change="onPageChange"
        />
        </div>
      </div>
  </div>
  
</template>

<script setup lang="jsx">
import { ref,onMounted } from 'vue';
import { COLUMNS } from './constants'
import { getProjectList } from '@/api/serve'

const data = ref([]);
const total = ref(0);
const dataLoading = ref(false) // 加载中

const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})

//调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}


</script>
